@charset "utf-8";

@function vw($a){
    @return ( $a / 640 ) * 100vw;
}
header{
    position: absolute;
    top: 0;
    width: 100%;
    height: vw(75);
    border-bottom: 1px solid #7f7f7f;
    li{
        width: 50%;
        height: vw(73);
        float: left;
        list-style: none;
        text-align: center;
        line-height: vw(73);
        font-size: vw(30);
        color: #000000;
    }
    li:hover{
        border-bottom: 2px solid #333333;
    }
    .bee-bottom{
        border-bottom: 2px solid #333333;
    }
}
section{
    position: absolute;
    top: vw(75);
    width: 100%;
    overflow-y: scroll;
    bottom: 0;
    .bee-button{
        width: 100%;
        height: vw(76);
        input[type="button"]{
            width: vw(112);
            height: vw(38);
            border-radius:vw(4) 0 0 vw(4);
            border:1px solid #878787;
            border-right: none;
            font-size: vw(20);
            margin-left: vw(209);
            color:white ;
            margin-top: vw(18);
            background: #a6a6a6;
        }
        input[type="button"]:last-child{
            width: vw(112);
            height: vw(38);
            border-radius: 0 vw(4) vw(4) 0;
            border:1px solid #d0d0d0;
            border-left: none;
            margin-left:vw(-10);
            font-size: vw(20);
            margin-top: vw(18);
            background: white;
            color: #9f9f9f;
        }
        input[type="button"]:hover{
            border-color: #000000;
            color:white;
            background: #a6a6a6;
        }
    }
    .bee-photo{
        width: 100%;
        height: vw(300);
        position: relative;
        box-sizing: border-box;
        img{
            width: 100%;
            height: 100%;
            box-sizing: border-box;
        }
    }
    .bee-photo11{
        width: 100%;
        height: vw(300);
        position: relative;
        box-sizing: border-box;
        img{
            width: 100%;
            height: 100%;
            box-sizing: border-box;
        }
    }
    .bee-photo:nth-child(2):before{
        position: absolute;
        content: "已开办";
        display: block;
        top:0;
        right:0;
        width: vw(92);
        height: vw(38);
        background: black;
        color: white;
        opacity: .2;
        font-size: vw(24);
        line-height: vw(38);
        text-align: center;
    }
    .bee-photo:before{
        position: absolute;
        content: "已结束";
        display: block;
        top:0;
        right:0;
        width: vw(92);
        height: vw(38);
        background: black;
        color: white;
        opacity: .2;
        font-size: vw(24);
        line-height: vw(38);
        text-align: center;
    }
    
    .bee-photo:after{
        position: absolute;
        content: "";
        display: block;
        top:vw(0);
        right:vw(90);
        width:0;
        border-left:0;
        border-top: 0;
        border-bottom:vw(38) solid transparent;
        border-right:vw(8) solid black;
        opacity: .2;
    }
    
    .bee-mover{
        width: 100%;
        height: vw(155);
        .bee-mover1{
            margin-left: vw(34);
            h1{
                margin-top: vw(13);
                font-size: vw(24);
                color: #333333;
            }
            p{
                margin-top: vw(10);
                font-size: vw(18);
                color: #a6a6a6;
                a{
                   font-size: vw(30);
                   font-weight: bolder; 
                }
                .bee-mover-a{
                    font-size: vw(15);
                   font-weight: bolder;
                }
            }
            .bee-mover1-1{
                margin-top: vw(15);
                width: vw(160);
                height: vw(27);
                border: 1px solid #d0d0d0;
                font-size: vw(18);
                color: #7d7d7d;
                border-radius: vw(8);
                text-align: center;
                img{
                    width:vw(16);
                    height: vw(16);
                }
                b{
                 font-weight: normal;
                 line-height:vw(27) ;
                 color: #757575;
                }
            }
            .bee-mover1-2{
                margin-top: vw(15);
                margin-left: vw(13);
                width: vw(70);
                height: vw(27);
                text-align: center;
                border: 1px solid #d0d0d0;
                font-size: vw(18);
                color: #7d7d7d;
                font-weight: normal;
                border-radius: vw(8);
                img{
                    width:vw(18);
                    height: vw(18);
                }
                b{
                 font-weight: normal;
                 line-height:vw(27) ;
                 color: #757575;
                }
            }
        }
        .bee-mover2{
            margin-top: vw(13);
            margin-right: vw(18);
            input[type="button"]{
                width: vw(143);
                height: vw(43);
                border-radius: vw(8);
                color: white;
                background: #7d7d7d;
                font-size: vw(25);
            }
            .bee-mover2-1{
                width: vw(100);
                height: vw(29);
                border: 1px solid #d0d0d0;
                border-radius: vw(8);
                margin-top: vw(31);
                margin-left: vw(30);
                margin-right: vw(0);
                p{
                    font-size: vw(18);
                    color: #7f7f7f;
                    line-height: vw(29);
                }
            }
        }
    }
    .bee-mover33{
            width: 100%;
            height: vw(190);
        }
    
}
.bee-photo:before {
    transform-origin:left top;
    animation: diao 5s linear infinite alternate;
}
.bee-photo:after{
    transform-origin:right top;
    animation: diao1 5s linear infinite alternate;
}
@keyframes diao {
    0% {
        transform: rotateY(0deg) translateX(vw(0));
    }
    
    100% {
        transform: rotateY(0deg) translateX(vw(-520));
    }
}
@keyframes diao1{
    0% {
        transform: rotateY(0deg) translateX(vw(0));
    }
    100% {
        transform: rotateY(0deg) translateX(vw(-520));
       }
}
.bee-mover2 input[type="button"]:hover{
    animation: tiao 500ms linear infinite alternate;
}
@keyframes tiao{
    0%{transform: rotateY(45deg);}
    25%{transform: rotateY(0deg);}
    50%{transform: rotateY(-45deg);}
    100%{transform: rotateY(0deg);}
}
